﻿<!DOCTYPE html>
<html>
<head>
    <title>form</title>
    <link rel="Stylesheet" href="../lib/css/j3.css" />
    <script type="text/javascript" src="../lib/js/j3.js"></script>
    <script type="text/javascript" src="../lib/js/lang/zh-cn.js"></script>
</head>
<body>
<div id="ctnr" style="width:450px">
</div>
<div id="data"></div>
<script type="text/javascript">
    j3.ready(function () {
        var userModel = new j3.Model({
            account : 'imzshh@163.com',
            subscribe : true,
            birthday : new j3.DateTime(1985, 4, 12),
            'program-language' : 'coffeescript'
          });

        var items = new j3.List;
        items.insert({text:'c#'});
        items.insert({text:'javascript'});
        items.insert({text:'coffeescript'});

        var form = new j3.Form({
          ctnr : 'ctnr',
          datasource : userModel,
          children : [
            {
              cls : j3.TextboxFormItem,
              label : 'Account/Email',
              controlFill : 1,
              name : 'account',
            },
            {
              cls : j3.TextboxFormItem,
              label : 'Password',
              controlFill : 1,
              type : 'password',
              name : 'password',
            },
            {
              cls : j3.SwitchFormItem,
              label : 'Subscribe Newsletters',
              name : 'subscribe',
            },
            {
              cls : j3.DateSelectorFormItem,
              label : 'Day of Birth',
              controlFill : 1,
              name : 'birthday'
            },
            {
              cls : j3.DropdownListFormItem,
              label : 'Program Language',
              controlFill : 1,
              items : items,
              name : 'program-language'
            },
            {
              cls : j3.TextboxFormItem,
              label : 'Description',
              controlFill : 1,
              multiline : true,
              name : 'description'
            },
            {
              cls : j3.CheckboxFormItem,
              label : '',
              name : 'private',
              text : 'Keep my information private'
            },
            {
              cls : j3.FormActions,
              children : [
                {
                  cls : j3.Button,
                  text : 'Register',
                  primary : true,
                  name : 'ok'
                }
              ]
            }
          ],
          on : {
            action : function(sender, args){
              if(args.name == 'ok')
              {
                j3.$('data').innerHTML = sender.getDatasource().toJson();
              }         
            }
          }

        });
    });
</script>
</body>
</html>
